<template>
  <el-dialog
    :title="form.id ? '编辑部门' : '添加部门'"
    :visible.sync="dialogVisible"
    width="50%"
    :before-close="handleClose"
  >
    <el-form ref="form" :model="form" label-width="120px" :rules="rules">
      <el-form-item label="权限名称" prop="name">
        <el-input v-model="form.name" style="width:90%" />
      </el-form-item>
      <el-form-item label="权限标识" prop="code">
        <el-input v-model="form.code" style="width:90%" />
      </el-form-item>
      <el-form-item label="权限描述">
        <el-input v-model="form.description" style="width:90%" />
      </el-form-item>
      <el-form-item label="开启">
        <el-switch
          v-model="form.state"
          :active-value="1"
          :inactive-value="0"
        />
      </el-form-item>
    </el-form>
    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button size="small" type="primary" @click="btnOK">确定</el-button>
        <el-button size="small" @click="btnCancel">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { addPermissionList, getPermissionDetail, updatePermission } from '@/api/permission'
export default {
  name: 'Dialog',
  props: {
    currnId: {
      type: Number,
      default: null
    }
  },
  data () {
    return {

      dialogVisible: false,
      form: {
        name: '',
        code: '',
        description: '',
        state: null,
        pid: null,
        id: null
      },
      rules: {
        name: [
          { required: true, message: '权限名称不能为空', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '权限标识不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 显示
    showDialogH () {
      this.dialogVisible = true
    },
    // 隐藏
    showDialogM () {
      this.dialogVisible = false
    },
    handleClose () {
      this.showDialogM()
      this.$refs.form.resetFields()
    },
    async btnOK () {
      try {
        await this.$refs.form.validate()
        this.form.pid = this.currnId
        if (this.form.id) {
          const data = await updatePermission(this.form)
          console.log(data)
          this.$message.success('编辑成功')
        } else {
          await addPermissionList(this.form)
          this.$message.success('新增成功')
        }
        this.$parent.getPermissionData()
        this.handleClose()
      } catch (error) {
        console.log(error)
      }
    },
    reset () {
      this.form = {
        name: '',
        code: '',
        description: '',
        state: '',
        pid: null
      }
    },
    btnCancel () {
      this.handleClose()
    },
    async getDetail () {
      const data = await getPermissionDetail(this.currnId)
      this.form = { ...data }
    }
  }

}
</script>

<style scoped lang='less'>

</style>
